<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">
<dom-module id="machine-edit">
    <template>
        <style include="shared-styles dialogs">
        :host {
        }

        paper-card {
            display: block;
        }

        paper-dialog {
            width: 300px;
        }

        .submit-btn {
            background-color: var(--mist-blue);
            color: #fff;
        }
        </style>
        <paper-dialog id="editMachineModal" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
            <h2>Rename Machine</h2>
            <paper-dialog-scrollable>
                <p>
                    <template is="dom-repeat" items="[[items]]">
                        <paper-input id="item[[item.id]]" label="[[item.name]]" required pattern="[A-Za-z0-9_-]*" error-message="Alphanumericals, dashes and underscores allowed." value="[[item.name]]" auto-validate></paper-input>
                    </template>
                </p>
                <div class="clearfix btn-group">
                    <paper-button class="link" dialog-dismiss>Cancel</paper-button>
                    <paper-button class="submit-btn btn-block" raised on-tap="_submitForm" dialog-confirm>Submit</paper-button>
                </div>
            </paper-dialog-scrollable>
        </paper-dialog>
    </template>
    <script>
    (function() {
        'use strict';

        Polymer({
            is: 'machine-edit',

            properties: {
                items: {
                    type: Array
                },
                machine: {
                    type: Object,
                    value: {
                        id: null
                    },
                    notify: true
                },
                sendingData: {
                    type: Boolean,
                    value: false
                },
                formReady: {
                    type: Boolean,
                    computed: '_computeFormReady(machine.id, sendingData)'
                }
            },
            listeners: {
                'iron-overlay-closed': '_modalClosed'
            },
            _computeFormReady: function(id, sendingData) {
                var formReady = false;

                if (id) {
                    formReady = true;
                }

                if (sendingData) {
                    formReady = false;
                }

                return formReady;
            },
            _openDialog: function(e) {
                this.$.editMachineModal.open();
            },
            _closeDialog: function(e) {
                this.$.editMachineModal.close();
            },
            _modalClosed: function() {
                this._formReset();
            },
            _submitForm: function(e) {
                e.stopImmediatePropagation();
                var item = this.items[0],
                    action = {
                        'name': 'rename',
                        'icon': 'editor:mode-edit',
                        'confirm': true,
                        'multi': false
                    },
                    itemName = this.shadowRoot.querySelector('#item' + item.id).value;
                this.dispatchEvent(new CustomEvent('rename-machine', { bubbles: true, composed: true, detail: { action: action, name: itemName } }));

                this._closeDialog();
            },
            _formReset: function() {
                this.set('machine.id', '');
            },
            _computeLabel: function(itemname) {
                var l = itemname.slice(0);
                return l;
            },
            //from https://github.com/PolymerElements/paper-dialog/issues/7
        });
    })();
    </script>
</dom-module>